.other-stream-container {
	max-height: 700px;
	overflow-y: auto;
	max-width: 504px;
	min-width: 210px;
	.widget-video-tool-container {
		display: none;
		.tool-li {background: none;}
	}
	.audio {
		position: absolute;
		left: 0;
		top: 0;
		background-color: #2a2a2a;
		.small-icon {
			font-size: 12px;
		}
	}
	ul {
		padding: 0;
		bottom: 0;
		list-style-type: none;
		li {
			position: relative;
			margin-bottom: 12px;
			margin-right: 10px;
			flex-shrink: 0;
			
			.video-box {
				width: 100%;
				height: 100%;
				position: relative;
			}
			.video-desc {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				font-size: 14px;
			}
		}
	}
	.up-down-ul {
		display: flex;
		padding: 0;
		margin: 16px 0 0;
		overflow-x: auto;
		li {
			// overflow: hidden;
			// margin-right: 8px;
			background: #f5f7f8;
			position: relative;
		}
	}
	.left-ul{
		overflow-x: auto;
		width: 220px;
		margin-left: 12px;
	}
	.pc-full-li {
		width: 146px;
		height: 110px;
	
		.pc-full-video-box{
			height: 100%;
		}
	}
	.pad-full-li {
		width: 168px;
		height: 126px;
		.widget-video-tool-container {
			bottom: 14px
		}
	}
	.pad-left-li {
		width: 210px;
		height: 158px;
		background: #f5f7f8;
		text-align: center;
		.pad-left-video-box{
			height: 100%;
		}
	}
	.pc-left-li {
		width: 210px;
		height: 158px;
		background: #f5f7f8;
		text-align: center;
		.pc-left-video-box{
			height: 100%;
		}
	}
	.pad-right-li {
		width: 210px;
		height: 158px;
		background: #f5f7f8;
		text-align: center;
		.pad-right-video-box{
			height: 100%;
		}
	}
	.pc-right-li {
		width: 210px;
		height: 158px;
		background: #f5f7f8;
		text-align: center;
		.pc-right-video-box{
			height: 100%;
		}
	}
	.pad-close-li {
		width: 210px;
		height: 158px;
		background: #f5f7f8;
		text-align: center;
	}
	.pc-close-li {
		width: 210px;
		height: 158px;
		background: #f5f7f8;
		text-align: center;
	}
	.pc-close-video-box {
		height: 100%;
	}
}
.pad-layout-full-customer-video-wrapper {

}
.pad-layout-left-customer-video-wrapper, .pad-layout-right-customer-video-wrapper {
	width: 360px;
}
.pad-layout-close-customer-video-wrapper {
	width: 630px;
}
.pc-layout-left-customer-video-wrapper, .pc-layout-right-customer-video-wrapper {
	width: 548px;
}
.pc-layout-close-customer-video-wrapper {
	width: 880px;
}
.agent-video-box {
	.pc-menu-close-tool-contianer {
		max-width: 860px;
	}
	.pc-menu-left-tool-contianer {
		max-width: 800px;
	}
	.pc-menu-right-tool-contianer {
		max-width: 800px;
	}
}


.customer-stream-container {
	.audio {
		position: absolute;
		left: 0;
		top: 0;
		background-color: #2a2a2a;
	}
	position: relative;
	.video-desc {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.video-box {
		height: 100%;
		background: #f5f7f8;
		vertical-align: middle;
	}
	.pad-layout-full-customer-video {
		width: 100%;
		min-height: 348px;
		height: 348px;
		background: #f5f7f8;
		text-align: center;
		vertical-align: middle;
	}
	.pad-layout-left-customer-video {
		width: 100%;
		min-height: 480px;
		height: 480px;
		background: #f5f7f8;
		text-align: center;
		vertical-align: middle;
	}
	.pad-layout-right-customer-video {
		width: 100%;
		min-height: 500px;
		height: 500px;
		background: #f5f7f8;
		text-align: center;
		vertical-align: middle;
	}
	.pad-layout-close-customer-video {
		width: 100%;
		min-height: 500px;
		height: 500px;
		background: #f5f7f8;
		text-align: center;
		vertical-align: middle;
	}
	.pc-layout-full-customer-video {
		width: 100%;
		height: 100%;
		// min-height: 490px;
		// height: 490px;
		background: #f5f7f8;
		text-align: center;
		vertical-align: middle;
	}
	.pc-layout-left-customer-video {
		width: 100%;
		height: 100%;
		// min-height: 630px;
		// height: 630px;
		background: #f5f7f8;
		text-align: center;
		vertical-align: middle;
	}
	.pc-layout-right-customer-video {
		width: 100%;
		height: 100%;
		// min-height: 630px;
		// height: 630px;
		background: #f5f7f8;
		text-align: center;
		vertical-align: middle;
	}
	.pc-layout-close-customer-video {
		width: 100%;
		height: 100%;
		// min-height: 630px;
		// height: 630px;
		background: #f5f7f8;
		text-align: center;
		vertical-align: middle;
	}
	.pc-menu-tool-contianer {}
	.pad-menu-tool-contianer {
		max-width: 860px;
	}

	.render-media-status {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: #000000c4;
		display: flex;
		justify-content: center;
		align-items: center;

		.label {
			display: inline-block;
			font-size: 15px;
			font-weight: 400;
			color: #d7d7d7;
			line-height: 21px;
		}
	}
}
.widget-video-tool-container {

	width: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 100%);
	display: none;
	align-items: center;
	position: absolute;

	bottom: 0px;
	right: 0;
	color: #fff;
	// padding: 0 12px;
	margin: 0;
	z-index: 20;
	li {
		padding: 0 4px;
		margin: 0 !important;
		cursor: pointer;
	}
	.tips {
		display: none;
	}
	.icon-wrapper-item:hover .tips {
		display: block;
		background: #3c3d42;
		border-radius: 4px;
		padding: 5px 12px;
		font-size: 13px;
		position: absolute;
		bottom: 26px;
		color: #fff;
		word-break: keep-all;
	}
	.icon-wrapper {
		display: flex;
		align-items: center;
	}
}

.video-container {
	display: flex;
	justify-content: space-between;
}

.customervideo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: #000000;
}

.other-streams {
	width: 100%;
	height: 100%;
	display: block;
	video {
		object-fit: contain;
	}
}

.customer-role {
	position: absolute;
	height: 26px;
	background: linear-gradient(180deg, #3b5186 0%, #1c2137 100%);
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
	border-radius: 0px 0px 0px 12px;
	right: 0;
	color: #f6f6f6;
	line-height: 6px;
	font-size: 13px;
	padding: 10px;
	z-index: 1;
}

.cancel-btn-instructions {
	border-radius: 4px !important;
	border: 1px solid #bcc1d5 !important;
	margin: 6px 14px 6px 0 !important;
	border-radius: 4px !important;
	font-size: 13px !important;
	border: 1px solid #bcc1d5 !important;
	color: #bcc1d5 !important;
}

.customer_video_hidden {
	visibility: hidden;
	max-width: 81px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 设置滚动条的样式 */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
	border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
	background: #dddfe1;
}
/*video隐藏全屏按钮*/
.other-streams::-webkit-media-controls-fullscreen-button {
	display: none !important;
}
/*video隐藏音量控制*/
.other-streams::-webkit-media-controls-volume-control-container {
	display: none !important;
}
.other-streams::-webkit-media-controls-start-playback-button {
	display: none;
}
.other-streams {
	pointer-events: none;
	background-color: #000000;
	object-fit: contain;
}

/*video隐藏全屏按钮*/
.customervideo::-webkit-media-controls-fullscreen-button {
	display: none !important;
}
/*video隐藏音量控制*/
.customervideo::-webkit-media-controls-volume-control-container {
	display: none !important;
}
.customervideo::-webkit-media-controls-start-playback-button {
	display: none;
}
.customervideo {
	pointer-events: none;
	background-color: #000000;
}

.device-enum-wrapper {
	font-size: 12px;
	.sub-title {
		margin: 0;
		padding-bottom: 10px;
		color: #a0a0a0;
	}
	ul > li > {
		display: flex;
		align-items: center;
	}
	ul > li > p {
		margin: 0;
		padding: 4px 0;
		cursor: pointer;
		color: #d8d8d8;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.empty {
		padding-left: 20px;
		color: #d8d8d8;
	}
	.selected {
		width: 20px;
		padding: 0 4px;
	}
}
.device-enum-popover {
	max-width: 300px;
	.ant-popover-arrow {
		display: none;
	}
}
.device-enum-tool-tip {
	white-space: nowrap;
	max-width: 100% !important;
	padding: 0 !important;
}
.device-divider {
	background: #4d4f55;
	margin-bottom: 12px !important;
}

.reconnect-message-box-container {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #000000c4;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;

	.box-wrapper {
		width: 262px;
		height: 170px;
		background: #ffffff;
		border-radius: 14px;
		border: 1px solid #979797;
		padding: 35px 30px 30px 30px;

		.label {
			font-size: 14px;
			font-weight: 400;
			color: #2d2d2d;
			line-height: 20px;
			text-align: center;
			margin: 0;
		}
		.button {
			width: 156px;
			height: 38px;
			background: #252b48f5;
			border-radius: 21px;
			margin-top: 24px;
			margin-left: 20px;
			cursor: pointer;
			font-size: 14px;
			font-weight: 400;
			color: #d7d7d7;
			line-height: 20px;
		}
	}
}

.video-box {
	.disconnect-alert {
		position: fixed;
		top: 10px;
		left: calc(50% - 125px);
		width: 249px;
		height: 40px;
		background: #ffffff;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.14);
		border-radius: 2px;
		text-align: center;
		line-height: 40px;
		font-size: 13px;
		font-weight: 400;
		color: #202020;
	}
	.render-media-status {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: #000000c4;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.label {
			font-size: 13px;
			font-weight: 400;
			color: #d7d7d7;
			line-height: 18px;
			display: inline-block;
			text-align: center;
		}
	}
}
